<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>桂北程序员 - 注册页 | IT培训</title>

        <link rel="stylesheet" href="/css/registry.css">
        <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
        <link rel="stylesheet" href="/css/bootstrap/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
    </head>
    <body>
        
        <div class="root">

            <div class="header">
                <img src="/statics/images/logo.png" alt="" srcset="">
                <span class="ml-2" style="font-size: 20px;">注册</span>

                <div class="float-right">
                    <div class="dropdown">
                        <i class="float-right bi bi-list mr-2 header-menu" data-toggle="dropdown"></i>
                        <div class="dropdown-menu dropdown-menu-right">
                            <li class="dropdown-item">
                                <a href="#">在线咨询</a>
                            </li>
                            <li class="dropdown-divider"></li>
                            <li class="dropdown-item">
                                <a href="#">了解更多</a>
                            </li>
                            <li class="dropdown-item">
                                <a href="#">尝试课程</a>
                            </li>
                            <li class="dropdown-divider"></li>
                            <li class="dropdown-item">
                                <a href="#">建议反馈</a>
                            </li>
                        </div>
                    </div>
                
                </div>
                
            </div>
            <!-- 此处m-0必须加，覆盖掉row的自动偏移样式 -->
            <div class="body row m-0">
                <div class="d-none d-sm-none d-md-block col-md-2 offset-md-3 offset-lg-4">
                    <div class="info">
                        <h3 class="mb-4"><strong>注册账号</strong></h3>
                        <h3 class="mb-4"><strong>领专享福利</strong></h3>
                        <p class="mb-1" style="font-size: 14px;">
                            <i class="bi bi-check text-primary mr-2"></i>
                            免费体验 100+款付费IT课程
                        </p>
                        <p class="mb-1" style="font-size: 14px;">
                            <i class="bi bi-check text-primary mr-2"></i>
                            首款付费课程选购优惠，低置2折
                        </p>
                        <a href="/course/index.html" class="btn btn-outline-primary btn-sm">前往了解</a>
                    </div>
                </div>
                <div 
                    class="col-sm-8 col-md-6 col-lg-5 col-xl-4 d-flex align-items-center offset-sm-2 offset-md-0"
                >
                    <div class="registry shadow-lg">
                        
                        <span class="text-muted mb-2" style="font-size: 12px;">欢迎加入</span>
                        <h2>桂北程序员 - 注册</h2>

                        <form id="registry-form" class="was-validated my-3" action="" class="mt-5">
                            <div class="form-group">
                                <input id="l-u-uname" type="text" name="username" placeholder="用户名" class="form-control" required>
                                <div class="invalid-feedback">请输入账号</div>
                            </div>
                            <div class="form-group">
                                <input id="l-u-pwd" type="password" name="password" placeholder="桂北程序云账号密码" class="form-control" required>
                                <div class="invalid-feedback">请输入密码</div>
                            </div>
                            <div class="form-group">
                                <input id="l-e-email" type="email" name="email" placeholder="邮箱" class="form-control" required>
                                <div class="invalid-feedback">请输入有效的邮箱</div>
                            </div>
                            <div class="form-group">
                                <div class="input-group has-validation">
                                    <input id="l-e-captcha" type="text" name="captcha" placeholder="邮箱验证码" class="form-control" required>
                                    <div class="input-group-append">
                                        <button id="l-btn-captcha" class="btn btn-primary btn-block" type="button">获取验证码</button>
                                    </div>
                                    <div class="invalid-feedback">请输入邮箱验证码</div>
                                </div>
                            </div>
                        </form>
                        <hr>
                        <div class="my-2 d-flex justify-content-center " style="font-size: 14px;">
                            <a href="/login.html" class="text-muted mx-2">登录</a>
                            <a href="" class="text-muted mx-2">忘记密码</a>
                        </div>

                        <button 
                            id="btn-registry" 
                            style="margin-top: 88px;"
                            class="btn btn-primary btn-block d-flex align-items-center justify-content-center" 
                        >
                            <div class="spinner-border spinner-border-sm mr-2 d-none">
                                <span class="sr-only"></span>
                            </div>
                            注册
                        </button>

                    </div>
                </div>
                
            </div>

        </div>

    </body>
    <script src="/js/jquery-3.7.1.min.js"></script>
    <script src="/js/bootstrap/bootstrap.bundle.min.js"></script>
    <script type="module" src="/js/registry.js"></script>
</html>